import React, { useEffect, useState } from "react";
import {
  Button,
  Checkbox,
  Col,
  Form,
  Input,
  Row,
  message,
  Typography,
} from "antd";
import {
  LockFilled,
  LockOutlined,
  MailFilled,
  UserOutlined,
} from "@ant-design/icons";
import style from "./register.module.scss";
import { useNavigate } from "react-router-dom";
import { register } from "../../api/ckgl";

const Register = () => {
  let navigate = useNavigate();
  // username
  const onFinishRegister = async (values: any) => {
    let { email, password, username } = values;
    let res: any = await register({
      username,
      email,
      password: password as string,
    });
    if (res.code !== 0) return message.warning("注册失败");
    message.success("注册成功，请登录");
    navigate("/login"); // 注册成功后重定向到登录页面
  };

  const onFinishFailed = (errorInfo: any) => {
    console.log("Failed:", errorInfo);
  };

  return (
    <div className={style.body}>
      <div className={style.box}>
        <Row>
          <Col xs={24} md={10}>
            <div className={style.form}>
              <Typography.Title
                level={2}
                style={{
                  margin: 0,
                  padding: 20,
                  fontWeight: "bold",
                }}
              >
                高校物资仓储管理系统
              </Typography.Title>
              <Form
                name="register"
                wrapperCol={{ span: 24 }}
                initialValues={{ remember: true }}
                onFinish={onFinishRegister}
                onFinishFailed={onFinishFailed}
                autoComplete="off"
              >
                <Form.Item
                  label="用户名"
                  name="username"
                  rules={[
                    { required: true, message: "请输入用户名" },
                    { min: 2, message: "用户名最少需要4个字符" },
                  ]}
                >
                  <Input
                    prefix={<UserOutlined />}
                    placeholder="请输入用户名"
                    style={{ borderRadius: "5px" }} // 添加圆角样式
                  />
                </Form.Item>
                <Form.Item
                  label="邮箱"
                  name="email"
                  rules={[
                    { required: true, message: "请输入邮箱", whitespace: true },
                    { type: "email", message: "请输入有效的邮箱地址" },
                  ]}
                >
                  <Input
                    prefix={<MailFilled />}
                    placeholder="请输入邮箱"
                    style={{ borderRadius: "5px" }} // 添加圆角样式
                  />
                </Form.Item>

                <Form.Item
                  label="密码"
                  name="password"
                  rules={[
                    { required: true, message: "请输入密码", whitespace: true },
                  ]}
                >
                  <Input.Password
                    prefix={<LockOutlined />}
                    placeholder="请输入密码"
                    style={{ borderRadius: "5px" }} // 添加圆角样式
                  />
                </Form.Item>

                <Form.Item wrapperCol={{ span: 24 }}>
                  <Button
                    htmlType="submit"
                    type="primary"
                    style={{ width: "100%", borderRadius: "5px" }} // 添加圆角样式
                  >
                    注册
                  </Button>
                  <Button
                    style={{ width: "100%", marginTop: 18 }}
                    onClick={() => navigate("/login")}
                  >
                    前往登录
                  </Button>
                </Form.Item>
              </Form>
            </div>
          </Col>

          <Col xs={0} md={14}>
            <div className={style.image} />
          </Col>
        </Row>
      </div>
    </div>
  );
};

export default Register;
